<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="table-container table-fullscreen">
        <el-tabs class="topNav" v-model="activeName">
          <el-tab-pane label="门户资源管理" name="PORTAL" v-permission="['UR_PORTAL_NAV']">
            <div class="btnGroupBar">
              <el-radio-group v-model="portalCurrentInfo.label" @input="setPortalNav">
                <el-radio-button v-for="v in portalNavList" :key="v.name" :label="v.label" :name="v.name" :v-permission="v.permission"></el-radio-button>
              </el-radio-group>
            </div>
            <div class="tabContents">
              <component :is="portalCurrentInfo.component"></component>
            </div>
          </el-tab-pane>
          <el-tab-pane label="地理资源管理" name="GEOGRAPHY" v-permission="['UR_GEOGRAPHY_NAV']">
            <div class="listContents">
              <ParkResources ref="parkRef"></ParkResources>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产业资源管理" name="INDUSTRY" v-permission="['UR_INDUSTRY_NAV']">
            <div class="listContents">
              <IndustryResources ref="industryRef"></IndustryResources>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import CitySituation from './unifiedReporting/CitySituation'
import AirportTime from './unifiedReporting/AirportTime'
import TrainTime from './unifiedReporting/TrainTime'
import JurisdictionalResources from './unifiedReporting/JurisdictionalResources'
import PreferentialPolicy from './unifiedReporting/PreferentialPolicy'
import PublicityBoard from './unifiedReporting/PublicityBoard'
import ParkResources from './unifiedReporting/ParkResources'
import IndustryResources from './unifiedReporting/IndustryResources'
export default {
  name: "UnifiedReporting",
  components: { CitySituation, AirportTime, TrainTime, JurisdictionalResources, PreferentialPolicy, PublicityBoard, ParkResources, IndustryResources },
  data(){
    return {
      activeName: 'PORTAL',
      portalCurrentInfo: {},
      portalNavList: [
        { label: '丛台详情', name: 'CTXQ', permission: ['UR_PORTAL_CTXQ_NAV'], component: 'CitySituation' },
        { label: '机场时刻', name: 'JCSK', permission: ['UR_PORTAL_JCSK_NAV'], component: 'AirportTime' },
        { label: '高铁时刻', name: 'GTSK', permission: ['UR_PORTAL_GTSK_NAV'], component: 'TrainTime' },
        { label: '辖区资源', name: 'XQZY', permission: ['UR_PORTAL_XQZY_NAV'], component: 'JurisdictionalResources' },
        { label: '招商政策', name: 'YHZC', permission: ['UR_PORTAL_YHZC_NAV'], component: 'PreferentialPolicy' },
        { label: '公示栏', name: 'GSL', permission: ['UR_PORTAL_GSL_NAV'], component: 'PublicityBoard' }
      ]
    }
  },
  watch: {
    activeName(val){
      switch (val){
        case 'GEOGRAPHY':
          this.$refs.parkRef.getList()
          break;
        case 'INDUSTRY':
          this.$refs.industryRef.getList()
          break;
      }
    }
  },
  mounted() {
    this.setPortalNav('丛台详情')
  },
  methods: {
    setPortalNav(val){
      let currentInfo = this.portalNavList.filter(v => v.label === val)
      this.portalCurrentInfo = JSON.parse(JSON.stringify(currentInfo[0]))
    }
  }
}
</script>
<style lang="scss" scoped>
.topNav{
  margin: -16px;
  & > ::v-deep .el-tabs__header{
    margin-bottom: 0;
    .el-tabs__nav-wrap{
      padding: 0 16px;
    }
    .el-tabs__nav-scroll{
      padding: 0 6px;
    }
    .el-tabs__active-bar{
      box-sizing: content-box;
      padding: 0 6px;
      margin-left: -6px;
    }
    .el-tabs__item{
      height: 50px;
      line-height: 50px;
      margin: 0 !important;
    }
  }
}
.btnGroupBar{
  padding: 16px 16px 0;
}
.tabContents{
  ::v-deep .app-container {
    min-height: calc(100vh - 60px - 60px - 40px - 2px - 65px - 36px - 30px) !important;
  }
}
.listContents{
  ::v-deep .app-container {
    min-height: calc(100vh - 60px - 60px - 40px - 2px - 65px - 14px) !important;
  }
}
.tBtn{
  margin-top: 3px;
  margin-bottom: 3px;
}
</style>
